<template>
    <div style="height: 100%; position: relative">
        <el-drawer
            title="新增1"
            :visible.sync="show_dialog"
            direction="rtl"
            size="80%"
            custom-class="demo-drawer"
            ref="drawer"
        >
            <div class="demo-drawer__content" ref="content">
                <el-form :model="form" :rules="rules" v-if="show_dialog" ref="editDrawer">
                    <el-form-item label="菜单名称:" :label-width="formLabelWidth" prop="menu_name">
                        <el-input v-model="form.menu_name"></el-input>
                    </el-form-item>
                    <el-form-item label="所属父级:" :label-width="formLabelWidth" prop="parent_menu">
                        <el-cascader
                            v-model="form.parent_menu"
                            :options="powerData"
                            :props="{ expandTrigger: 'hover',label:'menu_name',value:'menu_id',children:'child',checkStrictly: true }"
                            @change="handleChange"
                            clearable
                            placeholder="默认为顶级菜单"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="路由名称:" :label-width="formLabelWidth" prop="description">
                        <el-input v-model="form.description"></el-input>
                    </el-form-item>
                    <el-form-item label="后端地址:" :label-width="formLabelWidth" prop="backend_url">
                        <el-input v-model="form.backend_url"></el-input>
                    </el-form-item>
                    <el-form-item label="前端地址:" :label-width="formLabelWidth" prop="frontend_url">
                        <el-input v-model="form.frontend_url"></el-input>
                    </el-form-item>
                    <el-form-item label="排序:" :label-width="formLabelWidth" prop="sort">
                        <el-input v-model="form.sort"></el-input>
                    </el-form-item>
                    <el-form-item label="是否需要记录日志:" :label-width="formLabelWidth" prop="is_log">
                        <el-switch
                            v-model="form.is_log"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="记录日志"
                            inactive-text="不记录"
                            active-value="1"
                            inactive-value="0"
                        ></el-switch>
                    </el-form-item>
                    <el-form-item label="防抖秒数:" :label-width="formLabelWidth" prop="anti_shake">
                        <el-input v-model="form.anti_shake"></el-input>
                    </el-form-item>
                    <el-form-item label="该菜单是否在页面内:" :label-width="formLabelWidth" prop="in_page">
                        <el-switch
                            v-model="form.in_page"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="页面中"
                            inactive-text="菜单中"
                            active-value="1"
                            inactive-value="0"
                        ></el-switch>
                    </el-form-item>
                    <el-form-item label="是否显示公共tab:" :label-width="formLabelWidth" prop="is_show_tab">
                        <el-switch
                            v-model="form.is_show_tab"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="展示"
                            inactive-text="隐藏"
                            active-value="1"
                            inactive-value="0"
                        ></el-switch>
                    </el-form-item>
                         <el-form-item label="是否显示:" :label-width="formLabelWidth" prop="is_show">
                        <el-switch
                            v-model="form.is_show"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="展示"
                            inactive-text="隐藏"
                            active-value="1"
                            inactive-value="0"
                        ></el-switch>
                    </el-form-item>
                </el-form>
            </div>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button
                    type="primary"
                    @click="handleClose"
                    :loading="loading"
                    v-show="type!=='show'"
                >{{ loading ? "提交中 ..." : "确 定" }}</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { dateFormatter } from "@/common/js/util"
export default {
    props: ['dialog', 'powerData'],
    data() {
        /* var checkTime = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请选择起止时间'));
            }
            setTimeout(() => {
                callback();
            }, 1000);
        }; */
        return {
            loading: false,
            formLabelWidth: '180px',
            show_dialog: false,//弹窗显示
            form: {
                menu_name: '',
                parent_menu: '',
                backend_url: '',
                frontend_url: '',
                is_log: '0',
                anti_shake: '0',
                in_page: '0',
                sort: '',
                description: '',//路由名称
				is_show_tab:'1',
                is_show:'1',
            },
            rules: {
                menu_name: [
                    { required: true, message: '菜单名称不能为空' }
                ],
                description: [
                    { required: true, message: '请输入路由名称' }
                ]
            },
            type: '',
            row: '',
            Services: '',//服务类型
            storesList: []
        }
    },
    created() {
        this.default_data();
    },
    methods: {
        default_data() {
            //服务类型
            this.getServices();
            //供应商
            this.getStores();
        },
        getStores() {
            this.$http.post("/admin/dataService/index.php?act=merchantSet&op=getStores").then(res => {
                if (res.code == 1) {
                    this.storesList = res.data;
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(err => {
                this.$message.error(err)
            })
        },
        getServices() {
            this.$http.post('/admin/dataService/index.php?act=merchantSet&op=getServices').then(res => {
                if (res.code == 1) {
                    this.Services = res.data;
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(err => {
                this.$message.error(err)
            })
        },
        handleChange(value) {
            console.log(value);
        },
        show_dialog_fn(type, row) {
            this.type = type;
            this.show_dialog = true;
            if (type === 'add') {
                this.form = {
                    menu_name: '',
                    parent_menu: [],
                    backend_url: '',
                    frontend_url: '',
                    is_log: '0',
                    anti_shake: '0',
                    in_page: '0',
                    sort: '',
                    description: '',
					is_show_tab:'1',
                    is_show:'1',//1显示，0隐藏
                };
            } else if (type === 'edit') {
                this.row = row;
                this.form.menu_name = row.menu_name;
                //查找父id
                let parent_arr = this.checkSonFn(this.powerData, row.menu_id);
                if (parent_arr.checkSon && parent_arr.parentIdArr.length > 1) {
                    //剔除最后一个元素
                    this.form.parent_menu = parent_arr.parentIdArr.slice(0, -1);
                } else {
                    this.form.parent_menu = [];
                }
                this.form.backend_url = row.backend_url;
                this.form.frontend_url = row.frontend_url;
                this.form.is_log = row.is_log;
                this.form.anti_shake = row.anti_shake;
                this.form.in_page = row.in_page;
                this.form.sort = row.sort;
                this.form.description = row.description;
                this.form.is_show_tab = row.is_show_tab;
                this.form.is_show = row.is_show;
                // this.getItemDetail(row.ID)
            }
        },
        checkSonFn(arr, son_id) {
            let eachInfo = {
                checkSon: false,
                parentIdArr: []
            }
            for (let index = 0; index < arr.length; index++) {
                const item = arr[index];
                let sonCheckArr = [];
                sonCheckArr.push(item.menu_id)
                if (item.menu_id === son_id) {
                    //找到了
                    eachInfo.checkSon = true;
                    eachInfo.parentIdArr = sonCheckArr;
                    break;
                } else if (item.child) {
                    let returnInfo = this.checkSonFn(item.child, son_id)
                    if (returnInfo.checkSon) {
                        eachInfo.checkSon = true;
                        eachInfo.parentIdArr = sonCheckArr.concat(returnInfo.parentIdArr);
                        break;
                    }
                }
            }
            return eachInfo;
        },
        cancelForm() {
            this.loading = false
            this.show_dialog = false
            clearTimeout(this.timer)
        },
        handleClose() {
            let {
                menu_name,
                parent_menu,
                backend_url,
                frontend_url,
                is_log,
                anti_shake,
                in_page,
                sort,
                description,
				is_show_tab,
                is_show,
            } = this.form;
            let data = {
                menu_name,
                parent_menu_id: parent_menu.length > 0 ? parent_menu.pop() : "0",
                backend_url,
                frontend_url,
                is_log,
                anti_shake,
                in_page,
                sort,
                description,
				is_show_tab,
                 is_show,
            }
            this.$refs.editDrawer.validate(valid => {
                if (valid) {
                    if (this.type === 'edit') {
                        data.menu_id = this.row.menu_id;
                        this.editItemDetail(data);
                    } else if (this.type === 'add') {
                        this.addItemDetail(data);
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })

        },
        /* getItemDetail(id) {
            this.$http.post(`/admin/dataService/index.php?act=merchantSet&op=getContract`, { id }).then(res => {
                if (res.code != 1) {
                    this.$message.warning(res.msg);
                    this.show_dialog = false;
                    return;
                }
                //处理服类型
                if (res.data.ServiceDescription) {
                    res.data.application_services = res.data.ServiceDescription.split(',');
                }

                //处理时间
                let time1 = res.data.ServiceAvailableTime;
                let time2 = res.data.ServiceEndTime;
                if (time1) {
                    time1 = dateFormatter('YYYY-MM-DD', time1 * 1000)
                }
                if (time2) {
                    time2 = dateFormatter('YYYY-MM-DD', time2 * 1000)
                }
                res.data.time_end_start = [time1, time2]
                this.form = res.data;
            }).catch(err => {
                this._message('error', err);
            })
        }, */
        addItemDetail(data) {
            this.$http.post(`/admin/auth/index.php?act=adminMenu&op=addMenu`, data).then(res => {
                if (res && res.code == 1) {
                    this.show_dialog = false;
                    this.$parent.getListData();
                    this.$message.success(res.msg);

                } else {
                    this.$message.warning(res.msg)
                }
            }).catch(err => {
                this._message('error', err);
            })
        },
        editItemDetail(data) {
            this.$http.post(`/admin/auth/index.php?act=adminMenu&op=addMenu`, data).then(res => {
                if (res.code == 1) {
                    this.show_dialog = false;
                    this.$message.success(res.msg);
                    this.$parent.getListData()
                } else {
                    this.$message.warning(res.msg)
                }
            }).catch(err => {
                this._message('error', err);
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.el-form {
    // width: 560px;
    padding-left: 10px;
}

.el-select /deep/.el-input {
    width: 360px;
}
.plantTable /deep/.el-input {
    width: auto;
}
form /deep/.el-input {
    width: 360px;
}

.demo-drawer__content {
    position: absolute;
    top: 0;
    bottom: 60px;
    width: 100%;
    overflow-y: auto;
}

/deep/.el-drawer__body {
    position: absolute;
    top: 77px;
    bottom: 0;
    width: 100%;
    overflow: auto;
    padding-bottom: 60px;
}

.demo-drawer__footer {
    position: absolute;
    bottom: 10px;
    left: 20px;
}

.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader /deep/.el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.row_line {
    border-bottom: 1px dashed #d7d8dc;
}
.goodsInfo {
    display: flex;
    align-items: center;
}
</style>
